<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/flexible.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/nav_3.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
		<title>登录</title>
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<span><</span>
			<span>全球精选</span>
			<span><img src="../img/ju.png"/></span>
		</header>

		<!---->
		<div class="lists">
			<section class="box">
				<div class="swiper-container-list banner">
					<div class="swiper-wrapper nav-list">
						<script type="text/html" id="quan">
							{{each a.data.nav v i}}
							<div class="swiper-slide">
								<figrue class="Life">
									<img src="{{v.img}}" />
									<p>{{v.p}}</p>
								</figrue>
							</div>
							{{/each}}
						</script>
					</div>
				</div>
				<div class="swiper-container-opts subject-list">
					<div class="swiper-wrapper ron">
						<script type="text/html" id="quan1">
							{{each ab.data.list v i}}
							<div class="swiper-slide list_slide">
								<div class="swiper-container lunbo" dir="rtl">
									<div class="swiper-wrapper">
										{{each v.slide a i}}
										<div class="swiper-slide"><img src="{{a}}" /></div>
										{{/each}}
									</div>
									<div class="swiper-pagination naton"></div>
								</div>

								<h3 class="title">♥ 今日推荐</h3>

								<div class="list_one">
									{{each v.list1 b i}}
									<figure>
										<img src="{{b.img}}" />
										<p>{{b.p1}}</p>
										<p>{{b.p2}}</p>
										<p>￥ {{b.p3}}</p>
									</figure>
									{{/each}}
								</div>

								<div class="list_two">
									{{each v.list2 c i}}
									<figure>
										<div class="left"><img src="{{c.img}}" /></div>
										<div class="right">
											<p>{{c.p1}}</p>
											<p><span>{{c.sp1}}</span><span>{{c.sp2}}</span></p>
											<p>{{c.p2}}</p>
											<p><span><span>￥{{c.sp3}}</span><span>￥{{c.sp4}}</span></span><span>{{c.sp5}}</span></p>
										</div>
									</figure>
									{{/each}}
								</div>

							</div>
							{{/each}}
						</script>
					</div>
				</div>
			</section>
		</div>

		<script src="../js/jquery-3.2.1.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script src="../js/template-web.js"></script>
		<script>
			$('.header :first-child').click(function(){
				location.href = "../index.html"
			})
			var swiper = new Swiper('.lunbo', {
				pagination: '.naton',
				paginationClickable: true,
				loop: true,
				autoplay: 2500
			});
			$.ajax({
				type: "get",
				url: "../json/nav_3.json",
				success: function(data) {
					console.log(data)
					var str = template("quan", {
						a: data
					})
					$('.nav-list').html(str)
					$('.nav-list').children().eq(0).addClass('active')
					var Swiper_active1 = $('.swiper-container-list .active'),
						Swiper_slide1 = $('.swiper-container-list .swiper-slide');
					var _mySwiperlist = new Swiper('.swiper-container-list', {
						watchSlidesProgress: true,
						watchSlidesVisibility: true,
						slidesPerView: 6,
					})
				}
			});

			$.ajax({
				type: "get",
				url: "../json/nav_3.json",
				success: function(data) {
					var str = template("quan1", {
						ab: data
					})
					$('.ron').html(str)
					var Swiper_active1 = $('.swiper-container-list .active'),
						Swiper_slide1 = $('.swiper-container-list .swiper-slide');
					var _mySwiperlist = new Swiper('.swiper-container-list', {
						watchSlidesProgress: true,
						watchSlidesVisibility: true,
						slidesPerView: 6,
						onTap: function() {
							_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
						}
					})
					var _mySwiperopts = new Swiper('.swiper-container-opts', {
						onSlideChangeStart: function() {
							updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
						}
					})
					function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
						Swiper_active.removeClass('active')
						var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active');
						activeNav.siblings().removeClass("active");
						if(!activeNav.hasClass('swiper-slide-visible')) {
							if(activeNav.index() > mySwiper_list.activeIndex) {
								var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
								mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
							} else {
								mySwiper_list.slideTo(activeNav.index())
							}
						}
					}
					var swiper = new Swiper('.lunbo', {
				pagination: '.naton',
				paginationClickable: true,
				loop: true,
				autoplay: 2500
			});
				}
			});
		</script>
	</body>

</html>